<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>用户数量</span>
              <el-tag type="success">今日+12</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="card-value">8,846</div>
            <div class="card-footer">
              <span>总用户数</span>
              <el-icon color="#67C23A"><TrendCharts /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>订单数量</span>
              <el-tag type="warning">今日+89</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="card-value">6,521</div>
            <div class="card-footer">
              <span>总订单数</span>
              <el-icon color="#E6A23C"><TrendCharts /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>销售额</span>
              <el-tag type="danger">今日+¥12,845</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="card-value">¥328,456</div>
            <div class="card-footer">
              <span>总销售额</span>
              <el-icon color="#F56C6C"><TrendCharts /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>访问量</span>
              <el-tag type="info">今日+1,234</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="card-value">42,638</div>
            <div class="card-footer">
              <span>总访问量</span>
              <el-icon color="#909399"><TrendCharts /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="dashboard-charts">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="销售趋势图表"></el-empty>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户分布</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="用户分布图表"></el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="dashboard-table">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最近订单</span>
              <el-button type="text">查看更多</el-button>
            </div>
          </template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="订单号" width="180" />
            <el-table-column prop="user" label="用户" width="180" />
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="amount" label="金额" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.statusType">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue';
import { TrendCharts } from '@element-plus/icons-vue';

export default {
  name: 'Dashboard',
  components: {
    TrendCharts
  },
  setup() {
    const tableData = ref([
      {
        id: 'DD20230601001',
        user: '张三',
        date: '2023-06-01',
        amount: '¥2,156.00',
        status: '已完成',
        statusType: 'success'
      },
      {
        id: 'DD20230602002',
        user: '李四',
        date: '2023-06-02',
        amount: '¥4,523.00',
        status: '待支付',
        statusType: 'warning'
      },
      {
        id: 'DD20230603003',
        user: '王五',
        date: '2023-06-03',
        amount: '¥1,836.00',
        status: '已发货',
        statusType: 'info'
      },
      {
        id: 'DD20230604004',
        user: '赵六',
        date: '2023-06-04',
        amount: '¥3,271.00',
        status: '已取消',
        statusType: 'danger'
      },
      {
        id: 'DD20230605005',
        user: '钱七',
        date: '2023-06-05',
        amount: '¥5,698.00',
        status: '已完成',
        statusType: 'success'
      }
    ]);

    return {
      tableData
    };
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .box-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .card-body {
      padding: 20px 0;
      
      .card-value {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #909399;
      }
    }
  }
  
  .dashboard-charts {
    margin-bottom: 20px;
    
    .chart-card {
      margin-bottom: 20px;
      
      .chart-placeholder {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  
  .dashboard-table {
    .table-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style> 